<template>
  <div v-show="$route.name === 'outer-purchase-detail'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/outer-purchase-list' }">外部采购记录
    </el-breadcrumb-item>
      <el-breadcrumb-item>外部采购详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域--订单数据修改 -->
    <el-card>
      <el-row>
        <el-col :span="24">
          <el-date-picker type="date" placeholder="选择日期" readonly v-model="purchase_time">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row>
        <el-table
        border
        v-loading="loading"
        :data="outerData"
        style="margin-top: 10px;">
          <el-table-column type="index" width="60" align="center"></el-table-column>
        <el-table-column label="分类" prop="category_name" min-width="100" align="center"></el-table-column>
        <el-table-column label="商品" prop="name" min-width="130" align="center"></el-table-column>
        <el-table-column label="单位" prop="unit" min-width="80" align="center"></el-table-column>
        <el-table-column label="数量" prop="count" min-width="80" align="center"></el-table-column>
        <el-table-column label="单价" prop="price" min-width="100" align="center" v-if="groupid === 8">
          <template slot-scope="scope">
            <span>{{ parseFloat(scope.row.price).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="comment" min-width="180" align="center"></el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button  @click="back" style="margin-left: 5px;margin-top: 10px;">返回</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        sell_number: '',
        outerData: [],
        purchase_time: '',
        loading: false,
        groupid: ''
      }
    },
    mounted() {
      this.sell_number = this.$route.params.sell_number
      this.come = this.$route.params.come
      this.getUserInfo()
      this.getouterData()
    },
    methods: {
      // 获取用户信息
      async getUserInfo() {
        const { data: result } = await this.$http.get('/user/' + localStorage.userid)
        if (result.status !== 200) return this.$message.error(result.msg)
        this.groupid = result.data.groupid * 1
      },
      getouterData() {
        if (this.$route.name === 'outer-purchase-detail') {
          if (this.$route.params.sell_number) {
            this.sell_number = this.$route.params.sell_number
            localStorage.setItem('outerId', this.$route.params.sell_number)
          } else {
            this.sell_number = localStorage.getItem('outerId')
          }
          if (this.sell_number) {
            this.loading = true
            this.getOuterByNumber(this.sell_number)
          }
        }
      },
      async getOuterByNumber(sell_number) {
        const { data: result } = await this.$http.get('/store-outer/number', { params: { sell_number: sell_number } })
        if (result.status !== 200) {
          this.loading = false
          return this.$message.error(result.msg)
        }
        this.loading = false
        this.outerData = result.data.list
        this.purchase_time = result.data.purchase_time
      },
      back () {
        localStorage.removeItem('outerId')
        this.$router.push({ 'name': 'outer-purchase-list' })
      },
    }
  }
</script>


